<template>
  <!-- 
		搜索历史数据保存在本地。
		当用户对该数据进行了搜索之后，那么该数据就算是搜索历史的数据了
	 -->
  <view class="search-history-container">
    <!-- title -->
    <view class="search-history-title-box">
      <view class="search-history-title">搜索历史</view>
      <view v-if="!isShowClear">
        <uni-icons type="trash" @click="isShowClear = true"></uni-icons>
      </view>
      <view v-else>
        <text class="txt" @click="onDelAllSearchData">全部删除</text>
        <text class="txt" @click="isShowClear = false">完成</text>
      </view>
    </view>
    <!-- 内容 -->
    <view class="search-history-box">
      <block v-for="(item, index) in searchData" :key="index">
        <view class="search-history-item">
          <text class="history-txt line-clamp" @click="onItemClick(item)">{{ item }}</text>
          <uni-icons type="clear" v-show="isShowClear" @click="onDelsearchData(index)"></uni-icons>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'search-history',
  props: {
    searchData: {
      required: true,
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isShowClear: false // 判断显示删除图标
    }
  },
  methods: {
    ...mapMutations('search', ['sortSearchData']),
    // 删除指定历史数据
    onDelsearchData(index) {
      this.$emit('onDelsearchData', index)
    },
    // 删除全部历史数据
    onDelAllSearchData() {
      this.$emit('onDelAllSearchData')
    },
    //
    onItemClick(item) {
      this.$emit('onSearch', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-history-container {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;
  .search-history-title-box {
    display: flex;
    justify-content: space-between;

    .search-history-title {
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
      padding: $uni-spacing-col-sm $uni-spacing-row-sm;
    }
    .txt {
      color: $uni-text-color-grey;
      font-size: $uni-font-size-sm;
      padding: $uni-spacing-col-sm $uni-spacing-row-sm;
    }
  }
  .search-history-box {
    margin-top: $uni-spacing-col-lg;
    .search-history-item {
      width: 50%;
      box-sizing: border-box;
      display: inline-block;
      padding: $uni-spacing-col-base $uni-spacing-row-base;
      position: relative;
      .history-txt {
        width: 85%;
        display: inline-block;
        color: $uni-text-color;
        font-size: $uni-font-size-base;
      }
    }
    .search-history-item:nth-child(odd):before {
      content: ' ';
      border-left: 1px solid #999;
      display: inline-block;
      height: 10px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
  }
}
</style>
